<template>
	<view class="order-list" :class="themeName">
		<!-- Tabs -->
		<u-tabs :list="tabsList" :is-scroll="false" :height="80" active-color="rgba(64, 115, 250, 1)"
			:bar-style="{ top: '100%' }" :current="tabsIndex" @change="changeCurrentTab" />

		<!-- Order Lists -->
		<view class="order-item">
			<view class="order-item-box">
				<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
				auto: false,
				noMoreSize: 3,
				empty: {
					icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
					tip: $zhTran('暂无订单~'),
					fixed: true
				}
			}" :bottom="0" :down="{ auto: false }" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<block v-for="(tabItem, tabIndex) in tabsList" :key="tabItem['sign']">
						<view class="order-contain" v-if="currentTab['sign'] === tabItem['sign']">
							<view class="order" v-for="orderItem in tabsList[tabIndex].list" :key="orderItem.id"
								@click="toPath('detail',{id:orderItem.id})">
								<view class="box-main m-l-10">
									<view class="flex row-between u-border-bottom p-b-20">
										<view>{{orderItem.type_desc}}</view>
										<view class="badge m-l-20" :class="[statusDesc[orderItem.status]]">
											{{orderItem.status_desc}}
										</view>
									</view>
									<view class="flex m-t-20 m-b-20">
										<view>{{orderItem.user_nickname}}</view>
										<view class="m-l-10 m-r-10">{{orderItem.user_mobile}}</view>
										<view style="color: rgba(64, 115, 250, 1);"
											@click.native.stop="callPhone($event,orderItem.user_mobile)">
											{{$zhTran('拨打')}}
										</view>
									</view>
									<view class="flex m-t-20 m-b-20 desc">{{orderItem.order_goods[0].goods_name}}</view>
									<view class="flex m-t-20 m-b-20 desc u-border-bottom p-b-20">
										{{orderItem.order_goods[0].delivery_address}}
									</view>
									<view class="flex m-t-20 m-b-20 desc">{{$zhTran('工单用时：')}}{{orderItem.use_hours}}
									</view>
								</view>
							</view>
						</view>
					</block>
				</mescroll-uni>
			</view>
			<w-jishuzhichi :class="[{'jishuzhichi-nodata':currentTabList.length == 0}]" />
		</view>

		<u-tabbar v-model="current" :list="navList" active-color="rgba(64, 115, 250, 1)"
			inactive-color="rgba(133, 133, 133, 1) " @change="toTabbar"></u-tabbar>
	</view>
</template>


<script>
	import {
		apiServiceWorkOrderOrderList
	} from "@/api/service_work_order"
	import {
		navList
	} from "./nav"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		mixins: [MescrollMixin],

		data() {
			return {
				current: 1,
				navList: this.$zhTran(navList),
				// Tabs列表
				tabsList: [{
					sign: 'all',
					name: this.$zhTran('全部'),
					list: [],
				}, {
					sign: 'new',
					name: this.$zhTran('新工单'),
					list: [],
				}, {
					sign: 'work',
					name: this.$zhTran('服务中'),
					list: [],
				}, {
					sign: 'check',
					name: this.$zhTran('验收中'),
					list: [],
				}, {
					sign: 'done',
					name: this.$zhTran('已完成'),
					list: [],
				}, {
					sign: 'cancel',
					name: this.$zhTran('已取消'),
					list: [],
				}],
				tabsIndex: '', // Tabs索引
				statusDesc: ['new', 'work', 'check', 'done', 'cancel']
			}
		},

		computed: {
			// 当前Tab项
			currentTab() {
				return this.tabsList[this.tabsIndex] || {}
			},

			currentTabList() {
				if (this.tabsList[this.tabsIndex] == undefined) return []
				return this.tabsList[this.tabsIndex].list || []
			},

			// 映射Tabs项
			mapTabsItem() {
				return sign => this.tabsList.find(item => item['sign'] === sign)
			}
		},

		methods: {
			// 更改当前Tab页
			changeCurrentTab(index) {
				this.tabsIndex = index
				this.refreshOrderData()
			},

			// 刷新订单数据 @Mixins【/src/mixins/order.js】内调用，请勿删除
			refreshOrderData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},

			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				const sign = this.currentTab.sign
				apiServiceWorkOrderOrderList({
					order_type: sign,
					accendant_user: this.userInfo.id,
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					page_size,
					count,
					extend
				}) => {
					const tab = this.mapTabsItem(sign)
					if (num === 1) tab.list = []
					tab.list = [...tab.list, ...lists]
					tab.list = this.$zhTran(tab.list)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},

			toTabbar(idx) {
				this.$Router.replaceAll({
					path: this.navList[idx].path,
					query: {}
				})
			},
			toPath(url, equery) {
				var nquery = equery || {}
				this.$Router.push({
					path: '/bundle3/pages/service_work_order/accendant/' + url,
					query: nquery
				})
			},
			callPhone(e, phone) {
				e.preventDefault(); // 阻止事件冒泡穿透
				wx.makePhoneCall({
					phoneNumber: phone
				})
			},
		},

		onLoad() {
			const options = this.$Route.query
			const mode = options.mode ?? 'all'
			const tabIndex = this.tabsList.findIndex(item => item['sign'] === mode)

			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}

			this.changeCurrentTab(tabIndex)
			setTimeout(() => {}, 0.5 * 1000)
		},
		onUnload() {},
	}
</script>


<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.order-list {
		height: 100%;
		display: flex;
		flex-direction: column;

		.order-item {
			flex: 1;
			min-height: 0;

			.order-item-box {
				height: calc(100% - 80rpx - constant(safe-area-inset-bottom));
				height: calc(100% - 80rpx - env(safe-area-inset-bottom));
			}
		}
	}

	.order-contain {
		padding: 0 20rpx;
	}

	.order {
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 5px;
		background-color: #FFFFFF;

		.box-main {
			width: 100%;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(22, 22, 22, 1);
			}

			.badge {
				padding: 10rpx 20rpx;
				border-radius: 6rpx;
				margin-right: 10rpx;
				font-size: 24rpx;

				&.new {
					background-color: rgba(64, 115, 250, 1);
					color: #fff;
				}

				&.work {
					background-color: rgba(255, 141, 26, 1);
					color: #fff;
				}

				&.check {
					background-color: rgba(245, 114, 108, 1);
					color: #fff;
				}

				&.done {
					background-color: rgba(103, 194, 69, 1);
					color: #fff;
				}

				&.cancel {
					background-color: rgba(153, 153, 153, 1);
					color: #fff;
				}
			}

			.desc {
				color: rgba(128, 128, 128, 1);
				font-size: 24rpx;
			}

		}



	}
</style>